<template>
  <div class="search-suggestion">
    <van-cell
      icon="search"
      @click="$emit('search',item)"
      v-for="(item, index) in searchValList"
      :key="index"
    >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <!-- <template #title> -->
      <div v-html="hightLight(item)"></div>
      <!-- </template> -->
    </van-cell>
  </div>
</template>
<script>
import { debounce } from "lodash";
import { searchSuggestion_api } from "@/api/user.js";
export default {
  props: ["searchVal"],
  data() {
    return {
      searchValList: [],
    };
  },
  methods: {
    // 设置搜索建议值==所有值 为高亮
    hightLight(datastr) {
      var reg = new RegExp(this.searchVal, "gi");
      return datastr.replace(
        reg,
        `<span class="active">${this.searchVal}</span>`
      );
    },
  },
  watch: {
    // 监听数据的变化  立马会执行
    searchVal: {
      // 函数防抖
      handler: debounce(async function (newVal, oldVal) {
        // console.log(111111111);
        const { data: res } = await searchSuggestion_api(newVal);
        // console.log(res);
        this.searchValList = res.data.options;
      }, 300),
      immediate: true,
    },
  },
};
</script>
<style lang='less' scoped>
/deep/.active {
  color: red;
}
.search-suggestion {
  padding-top: 105px;
}
</style>